{% extends 'base.html' %}

{% block title %}学生管理{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">学生管理</h1>
    
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="input-group">
                <input type="text" class="form-control" id="searchStudent" placeholder="搜索学生...">
                <button class="btn btn-outline-secondary" type="button" id="buttonSearch">搜索</button>
            </div>
        </div>
        <div class="col-md-4">
            <select class="form-select" id="filterGrade">
                <option value="all">所有年级</option>
                <option value="初一">初一</option>
                <option value="初二">初二</option>
                <option value="初三">初三</option>
                <option value="高一">高一</option>
                <option value="高二">高二</option>
                <option value="高三">高三</option>
            </select>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0">学生列表</h5>
        </div>
        <div class="card-body">
            {% if students %}
                <div class="table-responsive">
                    <table class="table table-hover" id="studentsTable">
                        <thead>
                            <tr>
                                <th>用户名</th>
                                <th>年级</th>
                                <th>兴趣</th>
                                <th>练习完成数</th>
                                <th>平均分数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for student in students %}
                                {% set user = user_dict.get(student.user_id) %}
                                {% set stats = student_stats.get(student.id, {}) %}
                                <tr>
                                    <td>{{ user.username if user else 'Unknown' }}</td>
                                    <td>{{ student.grade }}</td>
                                    <td>{{ student.interests }}</td>
                                    <td>{{ stats.get('completed_exercises', 0) }}</td>
                                    <td>{{ "%.1f"|format(stats.get('avg_score', 0)) }}%</td>
                                    <td>
                                        <a href="{{ url_for('teacher_view_student', student_id=student.id) }}" class="btn btn-sm btn-primary">查看详情</a>
                                        <a href="{{ url_for('teacher_recommend', student_id=student.id) }}" class="btn btn-sm btn-success">推荐内容</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="alert alert-info">
                    暂无学生数据。
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- 学生统计 -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">年级分布</h5>
                </div>
                <div class="card-body">
                    <canvas id="gradeChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">学习活跃度</h5>
                </div>
                <div class="card-body">
                    <canvas id="activityChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script>
$(document).ready(function() {
    // 搜索功能
    $("#buttonSearch").click(function() {
        filterStudents();
    });
    
    $("#searchStudent").keyup(function(e) {
        if (e.keyCode === 13) {
            filterStudents();
        }
    });
    
    // 年级筛选
    $("#filterGrade").change(function() {
        filterStudents();
    });
    
    function filterStudents() {
        var searchText = $("#searchStudent").val().toLowerCase();
        var grade = $("#filterGrade").val();
        
        $("#studentsTable tbody tr").each(function() {
            var username = $(this).find("td:first").text().toLowerCase();
            var studentGrade = $(this).find("td:eq(1)").text();
            var interests = $(this).find("td:eq(2)").text().toLowerCase();
            
            var matchesSearch = username.includes(searchText) || interests.includes(searchText);
            var matchesGrade = grade === 'all' || studentGrade === grade;
            
            if (matchesSearch && matchesGrade) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
    
    // 年级分布图表
    var gradeData = {
        labels: ['初一', '初二', '初三', '高一', '高二', '高三'],
        datasets: [{
            label: '学生数量',
            data: [12, 19, 10, 15, 8, 5],  // 示例数据
            backgroundColor: [
                'rgba(75, 192, 192, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(255, 99, 132, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'rgba(255, 159, 64, 0.6)'
            ],
            borderWidth: 1
        }]
    };
    
    var gradeCtx = document.getElementById('gradeChart').getContext('2d');
    var gradeChart = new Chart(gradeCtx, {
        type: 'bar',
        data: gradeData,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 活跃度图表（过去7天）
    var activityData = {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [{
            label: '活跃学生数',
            data: [30, 25, 40, 35, 50, 20, 15],  // 示例数据
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1,
            fill: false
        }]
    };
    
    var activityCtx = document.getElementById('activityChart').getContext('2d');
    var activityChart = new Chart(activityCtx, {
        type: 'line',
        data: activityData,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
{% endblock %} 